<template>
  <div class="container">
    <el-card>
      <el-row style="padding-bottom: 10px">
        <el-col>
          <el-row type="flex" justify="space-between">
            <span style="font-size: 12px; color: hotpink">
              说明:目前支持学科和关键字条件筛选
            </span>
            <el-button icon="" type="success" @click="addbtnclick">
              新增试题</el-button
            >
          </el-row>
        </el-col>
      </el-row>
      <QueryQuestions @querydatainfo="querydatainfo"></QueryQuestions>
      <el-alert
        type="info"
        show-icon
        :title="`数据一共 ${counts} 条`"
      ></el-alert>
      <el-table :data="list">
        <el-table-column label="试题编号" prop="number"></el-table-column>
        <el-table-column label="学科" prop="subject"></el-table-column>
        <el-table-column label="目录" prop="remarks"></el-table-column>
        <el-table-column label="题型">
          <template v-slot="scope">
            {{ getquestionType(scope.row.questionType) }}
          </template>
        </el-table-column>
        <el-table-column label="题干" prop="question">
          <template v-slot="scope">
            <span v-html="scope.row.question"> </span>
          </template>
        </el-table-column>
        <el-table-column label="录入时间">
          <template v-slot="scope">
            {{ getcurrentTime(scope.row.addDate) }}
          </template>
        </el-table-column>
        <el-table-column label="难度">
          <template v-slot="scope">
            {{ getcurrentdifficulty(scope.row.difficulty) }}
          </template>
        </el-table-column>
        <el-table-column label="录入人" prop="creator"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-row type="flex">
              <el-col>
                <el-button
                  circle
                  plain
                  icon="el-icon-view"
                  type="primary"
                  size="small"
                  title="预览"
                  @click="previewbtnclick(scope.row.id)"
                ></el-button>
              </el-col>
              <el-col>
                <el-button
                  circle
                  plain
                  icon="el-icon-edit"
                  type="success"
                  size="small"
                  title="修改"
                  @click="$router.push(`/questions/new?id=${scope.row.id}`)"
                ></el-button>
              </el-col>
              <el-col>
                <el-button
                  circle
                  plain
                  icon="el-icon-delete"
                  type="danger"
                  size="small"
                  title="删除"
                  @click="delbtnclick(scope.row.id)"
                ></el-button>
              </el-col>
              <el-col>
                <el-button
                  circle
                  plain
                  icon="el-icon-check"
                  type="warning"
                  size="small"
                  title="加入精选"
                  @click="tochoiceList(scope.row.id)"
                ></el-button>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="space-between">
        <el-col></el-col>
        <el-pagination
          layout="prev, pager, next,sizes,jumper"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="5"
          :current-page.sync="pagination.page"
          :total="counts"
          background
          @size-change="currentsizechange"
          @current-change="currentpagechange"
        ></el-pagination>
      </el-row>
    </el-card>
    <el-dialog v-if="showdialog" :visible.sync="showdialog" title="题目预览">
      <PreviewQuestions
        :currentId="currentId"
        :isChoice="false"
      ></PreviewQuestions>
    </el-dialog>
  </div>
</template>

<script>
import { list, choiceAdd, remove, detail } from "@/api/hmmm/questions";
import { questionType, difficulty } from "@/api/hmmm/constants";
import { parseTime } from "@/utils";
export default {
  created() {
    this.loadquestionsList();
  },
  data() {
    return {
      showdialog: false,
      list: [{}],
      pagination: {
        page: 1,
        pagesize: 5,
      },
      counts: 0,
      currentId: NaN,
      formdata: {},
    };
  },
  components: {
    QueryQuestions: () => {
      return import("@/module-hmmm/components/questions-query");
    },
    PreviewQuestions: () => {
      return import("@/module-hmmm/components/questions-preview");
    },
  },
  methods: {
    /* 初始化 和刷新table 的数组元素 */
    async loadquestionsList() {
      this.pagination = { ...this.pagination, ...this.formdata };
      const { data: res } = await list(this.pagination);
      console.log(res);
      this.counts = res.counts;
      this.list = res.items;
    },
    addbtnclick() {
      this.$router.push(`/questions/new`);
    },
    currentsizechange(pagesize) {
      this.pagination.pagesize = pagesize;
      this.loadquestionsList();
    },
    currentpagechange(page) {
      this.pagination.page = page;
      this.loadquestionsList();
    },
    /* 点击预览 */
    previewbtnclick(currentId) {
      /* 组件传值用于 发送请求 回填 */
      this.showdialog = true;
      this.currentId = currentId;
    },
    tochoiceList(id) {
      this.dochoiceAdd(id);
    },
    async dochoiceAdd(id) {
      console.log(id);
      this.$confirm(`此操作将该题目加入精选, 是否继续?`, `提示`)
        .then(async () => {
          try {
            const res = await choiceAdd({ id, choiceState: 1 });
            this.$message.success(`添加精选成功`);
            this.loadquestionsList();
          } catch (err) {
            console.log(err);
          }
        })
        .catch(() => {});
    },
    /* 题型枚举 */
    getquestionType(value) {
      const Type = questionType.find((item) => {
        return item.value == value;
      });
      return Type ? Type.label : `未知`;
    },
    getcurrentdifficulty(value) {
      const currentdefaulty = difficulty.find((item) => {
        return item.value == value;
      });
      return currentdefaulty ? currentdefaulty.label : `未知`;
    },
    getcurrentTime(time) {
      return parseTime(time, `{y}-{m}-{d} {h}:{i}:{s}`);
    },
    delbtnclick(id) {
      this.$confirm(`确认删除`, `提示`)
        .then(() => {
          this.dodel(id);
        })
        .catch(() => {});
    },
    async dodel(id) {
      const { data: datainfo } = await detail({ id });
      try {
        await remove(datainfo);
        this.$message.success(`删除成功`);
        /* 刷新 */
        this.loadquestionsList();
      } catch (err) {
        console.log(err);
      }
    },
    /* 接收组件上传的信息用于和pagination对象合并请求list搜索 或者结合pagination  */
    async querydatainfo(formdata) {
      this.formdata = { ...formdata };
      /* 全选判断 */
      const isshowAll = Object.values(formdata).length;
      console.log(isshowAll);
      if (isshowAll) {
        this.loadquestionsList();
      } else {
        const { data: res } = await list({ page: 1, pagesize: 100 });
        console.log(res);
        this.counts = res.counts;
        this.list = res.items;
        // 如果没有formdata 必须清空上一次保留的formdata 有的属性
        const constantspagenation = {
          page: 1,
          pagesize: 5,
        };
        this.pagination = constantspagenation;
      }
    },
  },
};
</script>

<style >
</style>
